<template lang="pug">
.view.cp-login
  .login-container
    .login-form
      .form-title 欢迎登录！环予医疗管理系统
      .form-error(v-show="showErrorTip", v-text="errorTip")
      el-form(label-position="top", label-width="48px", :model="userInfo")
        el-form-item(label="用户名")
          el-input(v-model="userInfo.username", placeholder="Username")
        el-form-item(label="密码")
          el-input(v-model="userInfo.password", type="password", placeholder="Password", @keyup.enter.native="handleLogin")
        el-button.submit(type="primary", @click="handleLogin") 登录
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'login',
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      showErrorTip: false,
      errorTip: '用户名或者密码错误'
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    autoHide (errText) {
      this.errorTip = errText;
      this.showErrorTip = true;
      setTimeout(() => {
        this.showErrorTip = false;
      }, 1000);
    },
    handleLogin () {
      const username = this.userInfo.username.trim();
      const password = this.userInfo.password.trim();
      if (!username || !password) {
        this.autoHide('用户名或密码不能为空');
      } else {
        this.$store.dispatch('goLogin', { username, password }).then(() => {
          // 登录成功之后重定向到首页
          this.$router.push({ path: '/' });
        }).catch((res) => {
          // 登录失败提示错误
          const data = res.response.data || {};
          if (data.status === 403) {
            this.autoHide('用户名或密码错误');
          } else if (data.status === 409) {
            this.autoHide('账户已锁定');
          }
        });
      }
    },
    ...mapActions([
      'setToken'
    ])
  },
  mounted () {
  }
};
</script>

<style lang="sass">
.cp-login
  background-color: #e4edf2
  .login-container
    position: absolute
    top: 50%
    left: 50%
    margin-left: -400px
    margin-top: -250px
    width: 800px
    height: 500px
    background: url('../assets/login.jpg') center / cover no-repeat
    border-radius: 2px
  .login-form
    width: 260px
    position: absolute
    top: 50%
    right: 60px
    transform: translate3d(0, -50%, 0)
    background: white
    box-shadow: 0 2px 4px 0 #C18E12
    border-radius: 5px
    padding-bottom: 32px
    .form-title
      height: 42px
      line-height: 42px
      font-size: 14px
      color: #FFBB17
      box-shadow: 0 4px 16px 0 rgba(233,221,194,0.80)
      margin-bottom: 36px
      text-align: center
    .form-error
      position: absolute
      top: 52px
      left: 50%
      transform: translateX(-50%)
      background: #D74646
      font-size: 10px
      color: #FFFFFF
      text-align: center
      padding: 3px 4px
      z-index: 999
      white-space: nowrap
    form
      padding: 0 32px
      .el-form-item
        margin-bottom: 16px
      .el-form-item__label
        line-height: 1
        font-size: 14px
        color: #90bbc7
        padding-bottom: 0
      input
        height: 32px
        border: 0
        padding: 0
        background-color: transparent
        border-radius: 0
        border-bottom: 1px solid #dae7ef
        color: #000
        font-size: 12px
        &:focus
          border-bottom: 1px solid #d74646
          color: #d74646
    .submit
      margin-top: 20px
      background: #7cb1bf
      border: 1px solid #7cb1bf
      width: 100%
</style>
